<template>
	<view class="module flex alignCenter">
		<!-- 创建小组 -->
		<view class="positionBox" v-if="type=='groupSucc'">
			<view class="addSuccess">
				<image src="https://image.alhelp.net/uploads/20231104/966003032828a4fd2e7d71fe92abcc48.png" mode="widthFix"></image>
				<view class="bold font16 title">发布成功</view>
				<view class="noWidthBtn add" @click.stop="btnOper('addActivity')">添加小组活动</view>
				<view class="noWidthBtn no" @click.stop="btnOper('no')">暂不添加</view>
			</view>
		</view>
		<!-- 拒绝加入小组的弹框 -->
		<view class="positionBox" v-if="type=='joinFail'">
			<view class="joinBox">
				<image src="https://aihelp.oss-cn-hangzhou.aliyuncs.com/kwkd/resources/public/refuse.png" mode="widthFix"></image>
				<view class="bold font16 title">拒绝通过</view>
				<textarea class="font14" v-model.trim="reason" placeholder="输入拒绝理由...(50字符)" maxlength="50" placeholder-class="font14 color666"></textarea>
				<view class="flex alignCenter justConAround">
					<view class="cancelStyle" @click.stop="btnOper('cancel')">取消</view>
					<view class="sendStyle" @click.stop="btnOper('refuseSure')">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"uni-mdshowmodule",
		props:{
			type:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				reason:''
			};
		},
		methods:{
			btnOper(type){
				this.$emit("commonLayerOper",type,this.reason)
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "@/static/public.scss";
.module{
	position: fixed;
	width: 100%;
	height: 100%;
	left:0;
	top: 0;
	background: rgba(0,0,0,.4);
	z-index: 200;
	.positionBox{
		background:#fff;
		border-radius: 28rpx;
		width:540rpx;
		margin: 0 auto;
		text-align: center;
		image{
			display: block;
			margin: 0 auto;
			height:100rpx;
		}
		.addSuccess{
			padding: 90rpx 120rpx 70rpx;
			box-sizing: border-box;
			image{
				width: 50%;
				height:100rpx;
				display: block;
				margin: 0 auto;
			}
			.title{
				margin:10rpx 0 70rpx;
			}
			.noWidthBtn{
				padding: 20rpx 0;
				margin:0 0 20rpx;
			}
			.no{
				background: $colorMainOper;
			}
		}
		.joinBox{
			padding: 50rpx 30rpx 30rpx;
			box-sizing: border-box;
			image{
				width:40%;
			}
			.title{
				margin:10rpx 0 30rpx;
			}
			textarea{
				background: $pageBgColor;
				width: 100%;
				text-align: left;
				border-radius: 8rpx;
				padding: 20rpx;
				box-sizing: border-box;
				margin:0 0 30rpx;
				height: 200rpx;
			}
			.cancelStyle,
			.sendStyle{
				width: 200rpx;
			}
		}
	}
}
</style>